/**
 * Created by tiansha on 2016/5/1.
 */

import React, {Component} from 'react';
import { Link } from 'react-router';

import Collapse from 'react-bootstrap/lib/Collapse';

class CollapseMenu extends Component {
  constructor(...args) {
    super(...args);
    this.state = {};
  }

  render() {
    var collapses = null, leftIcon = null;
    if (this.props.item.subMenus) {
      let submenus = this.props.item.subMenus.map((item, key) => (
        <li>
          <Link to={item.link} className="transition">
            {item.label}
          </Link>
        </li>
      ));
      collapses = (
        <Collapse in={this.state.open}>
          <ul className="list-unstyled">
            {submenus}
          </ul>
        </Collapse>
      );
      leftIcon = (<span className="glyphicon glyphicon-menu-left pull-right transition" aria-hidden="true"></span>);
    }

    let className = "glyphicon glyphicon-" + this.props.item.glyphicon;
    return (
      <li>
        <Link to={this.props.item.link} className="transition" role="button" onClick={ ()=> this.setState({ open: !this.state.open })}>
          <span className={className} aria-hidden="true"></span>
          {this.props.item.label}
          {leftIcon}
        </Link>
        {collapses}
      </li>
    );
  }
}

export default class SideMenu extends Component {

  render() {

    const items = this.props.items.map((item, key) => {
      return (
        <CollapseMenu item={item}/>
      )
   });

    return (
      <div id="side-menu">
        <div className="profile-block">
          <img src={require("jon.png")} className="img-circle"/>
          <h4 className="profile-title">Jonny Doo <small>@jonnydoo</small></h4>
        </div>

        <ul className="nav nav-pills nav-stacked">
          {items}
        </ul>

      </div>
    );
  }
}
